<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>用工招聘</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        .van-tabs__line {
            width: .22rem !important;
        }
        .f3 div:first-child{
            width: .8rem;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .tag-list div{
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .borderBlue{
            border: 0.01rem solid #3F8CEC;
            border-radius: .04rem;
            padding: 0 .02rem;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="recruit-list">
            <div v-if="listOffering.length>0">
                <div class="recruit-list-item" v-for="(item,index) in listOffering" :key="item.id" @click="goPage(item, 1)">
                    <div class="f1 flex-x-sb">
                        <div class="title">
                            <span>{{item.workTypeName}}</span>
                            <span :class="item.status==0?'red':'borderBlue'">{{item.status == 0? '停止求职':'求职中'}}</span>
                        </div>
                        <div v-if="item.status == 1">
                            <div class="money" v-if="item.salary">
                                <span>¥</span>{{item.salary}} {{item.salaryUnitName}}
                            </div>
                            <div class="money" v-else>
                                <span>面议</span>
                            </div>
                        </div>
                    </div>
                    <div class="f2 flex-x-s tag-list">
                        <div class="label" v-for="(it,idx) in item.tags" :key="idx">{{it.name}}</div>
                    </div>
                    <div class="f3 flex-x-sb">
                        <div>{{item.addressName}}</div>
                        <span>{{item.publishTime | handleTimePlus('//::')}}</span>
                        <span>距离：{{item.countDistance}}</span>
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/home/phone.png" alt="" @click.stop="call(item.phone)">
                    </div>
                </div>
                <div class="no-more" v-if="!hasNext" style="border: 0;">没有更多了</div>
            </div>
            <div class="collect-empty" v-else>
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
                <div>暂无数据～</div>
            </div>
        </div>
        <div class="peijianshangcheng">
            <div class="release" @click="goEditPage">
                <div class="release-icon"></div>
                <div class="release-text">发布</div>
            </div>
        </div>
        <van-popup v-model="show" position="right" :style="{ height: '100%',width:'77%' }">
            <div class="screen-condition">
                <div>{{conditionName}}</div>
                <div class="screen-condition-list flex-x-s flex-wrap">
                    <div class="screen-condition-item" v-for="(item,index) in conditionList" :key="index" :class="{active:index == conditionCurIndex}" @click="selectCondition(index,item)">
                        {{item.val}}
                    </div>
                </div>
            </div>
            <div class="screen-confirm" @click="confirm">确定</div>
        </van-popup>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/swiper.min.js"></script>
    <script>
        apiready = function() {

            vm = new Vue({
                el: '.app',
                data() {
                    var title = "0";
                    var filterArr = []
                    return {
                        hasNext:false,
                        show: false,
                        conditionIndexObj: {
                            workIndex: 0,
                            cityIndex: 0,
                            selectIndex: 0,
                        },
                        filterArr,
                        title,
                        listJob: [],
                        conditionList: [],
                        conditionName: '',
                        conditionCurIndex: 0,
                        wxIndex: 0,
                        listOffering: [],
                        queryInfo: {
                            type: 1,
                            pageNum: 1,
                            pageSize: 10,
                            orderBy: "UPDATE_TIME_DESC",
                            status: null
                        },
                        objectOption: {
                            listOffer: [], // 工种类型
                            listExp: [], // 经验
                        },
                        authStatus:{
                            merchant:-1,
                            personal:-1
                        }
                    }
                },
                filters: {
                    handleTimePlus
                },
                mounted() {
                    // var location = $api.getStorage('location_home') || {}
                    var location = api.getPrefs({
                            sync: true,
                            key: 'location_home'
                        })||{}
                    this.queryInfo.location = JSON.parse(location).location;
                    this.initEmployList()
                    this.getListOptions(0);
                    this.getAuthorizationStatus()
                },
                methods: {
                    getAuthorizationStatus() {
                        let vm = this
                        mime("getAuthorizationStatus")(function(ret) {
                            vm.authStatus.merchant = ret.data.merchant
                            vm.authStatus.personal = ret.data.personal
                        })
                    },
                    getListOptions(type) {
                        var vm = this;
                        release('getListOptions')(type, function(ret) {
                            ret.data.unshift({
                                id: "",
                                val: '全部'
                            })
                            type = type + ""
                            switch (type) {
                                case "0":
                                    vm.objectOption.listOffer = ret.data;
                                case "1":
                                    vm.objectOption.listExp = ret.data;
                            }
                        })
                    },
                    initEmployList() {
                        var vm = this
                        var location = vm.queryInfo.location.split(',')
                        index.employ("getEmployList")(vm.queryInfo, function(ret) {
                            ret.data.list.map(item => {
                                var countDistance = getDistance(location[1], location[0], item.location.lat, item.location.lon)
                                countDistance = (Number(countDistance) / 1000).toFixed(1)
                                item.countDistance = countDistance > 500 ? '500km 以上' : countDistance + 'km'
                            })
                            if (vm.queryInfo.pageNum == 1) {
                                vm.listOffering = ret.data.list;
                            } else {
                                vm.listOffering = vm.listOffering.concat(ret.data.list);
                            }
                            console.log('招聘列表：',JSON.stringify(vm.listOffering));
                            vm.hasNext = ret.data.hasNext;
                        })
                    },
                    select(index) {
                        if (index == 0) {
                            this.conditionCurIndex = this.conditionIndexObj.workIndex
                            this.conditionName = '工种'
                            this.conditionList = this.objectOption.listOffer;
                        } else if (index == 1) {
                            api.openWin({
                                name: 'area_select_win',
                                url: '../select/area_select_win.html',
                                bounces: false,
                                pageParam: {
                                    key: 'value',
                                    title: "用工招聘"
                                }
                            });
                            return false;
                        } else if (index == 2) {
                            this.conditionCurIndex = this.conditionIndexObj.selectIndex
                            this.conditionName = '筛选'
                            this.conditionList = [{
                                id: "",
                                val: "全部"
                            }, {
                                id: 0,
                                val: "停止求职"
                            }, {
                                id: 1,
                                val: "求职中"
                            }]
                        }
                        this.wxIndex = index
                        this.show = true
                    },
                    confirm() {
                        if (this.wxIndex == 0) {
                            this.conditionIndexObj.workIndex = this.conditionCurIndex
                            this.queryInfo.workTypeIds = this.filterArr[0]
                        } else if (this.wxIndex == 1) {
                            return false
                        } else if (this.wxIndex == 2) {
                            this.conditionIndexObj.selectIndex = this.conditionCurIndex;
                            this.queryInfo.status = this.filterArr[1]
                        }
                        this.show = false;
                        this.listOffering = []
                        this.queryInfo.pageNum = 1;
                        this.initEmployList();
                    },
                    selectCondition(index, item) {
                        this.conditionCurIndex = index;
                        if (this.conditionName === "工种") {
                            this.filterArr[0] = item.id;
                        } else if (this.conditionName === "筛选") {
                            this.filterArr[1] = item.id;
                        }
                    },
                    call(phone) {
                        if (!checkToken()) return false;
                        phone = phone.split(',')
                        api.actionSheet({
                            cancelTitle: '取消',
                            buttons: phone
                        },function(ret,err){
                            if(ret.buttonIndex > phone.length) return false;
                            api.call({
                                type: 'call_type',
                                number: phone[ret.buttonIndex-1]
                            });
                        });
                    },
                    goPage(item, type) {
                        api.openWin({
                            name: 'recruit_detail_win',
                            url: './recruit_detail_win.html',
                            bounces: false,
                            pageParam: {
                                type: type,
                                id: item.id,
                                title: item.workTypeName
                            }
                        });
                    },
                    goEditPage(item) {
                        var vm = vm || this;
                        if (!checkToken()) return false;
                        if(vm.authStatus.merchant == 1 || vm.authStatus.personal == 1){
                            api.openWin({
                                name: 'release_edit_win',
                                url: '../release/release_edit_win.html',
                                bounces: false,
                                pageParam: {
                                    editName: "求职",
                                    status: 'edit',
                                }
                            });
                        }else{
                            toastMiddle('认证通过后才可进行发布')
                        }
                    },
                },

            })

            api.setRefreshHeaderInfo({
                bgColor: '#f7f7f7',
                textDown: '下拉更新有惊喜',
                textUp: '松开可以刷新'
            }, function(ret, err) {
                vm.listOffering = []
                vm.queryInfo.pageNum = 1;
                vm.initEmployList();
                api.refreshHeaderLoadDone()
            });
            api.addEventListener({
                name: 'showFilterBox'
            }, function(ret, err) {
                vm.select(ret.value.index)

            });
            api.addEventListener({
                name: 'filterDistrict'
            }, function(ret) {
                vm.queryInfo.areaIds = []
                if(ret.value.city.id > -1){
                    vm.queryInfo.areaIds = [ret.value.city.id]
                }
                vm.initEmployList();
            })
                // 上拉加载
            api.addEventListener({
                name: 'scrolltobottom',
                extra: {
                    threshold: -10
                }
            }, function(ret, err) {
                if (vm.hasNext) {
                    vm.queryInfo.pageNum++
                    vm.initEmployList();
                }
            });
            api.addEventListener({
                name: 'login'
            }, function(ret, err) {
                vm.getAuthorizationStatus()
            })
        }
    </script>
</body>

</html>
